<extend name="Extends/base" />
<block name="title">添加任务</block>
<block name="css">
</block>
<block name="body_style">class="bgc-f2f4f6"</block>
<block name="body">
    <div class="bgc-f3f3f3 ptb5 plr20 c-border-tb clearfix">
        <b class="c-f16" style="line-height: 40px">添加任务</b>
        <a href="javascript:;" class="jump-href fr c-btn c-btn-green c-btn-rounded ml10">刷新</a>
        <a href="javascript:history.back(-1);" class="fr c-btn c-btn-green c-btn-rounded ml10">返回</a>
    </div>
    <div class="pt30 plr20">
        <div class="form-layout form-horizontal-wider">
            <em class="pop-close"></em>
            <form id='myForm'>
                <div class="control-group mb10">
                    <label class="control-label"><sub class="control-sub"></sub> 任务名称：</label>
                    <div class="control-form">
                        <input type="text" name="title" placeholder="请输入任务名称" class="input-text input-text-w350">
                    </div>
                </div>
                <div class="control-group mb10">
                    <label class="control-label"><sub class="control-sub"></sub> 封面图片：</label>
                    <div class="control-form" data-name="cover">
                        <span class="upload-file-btn c-btn c-btn-small c-btn-green">浏览</span>
                    </div>
                </div>
                <div class="control-group mb10">
                    <label class="control-label"><sub class="control-sub"></sub> 任务类型：</label>
                    <div class="control-form">
                        <div class="cus-sel cus-sel-h33" data-toggle="formSelect">
                            <div class="cus-sel-chosed">
                                <input type="text" name="type" style="display:none;">
                                <span class="cus-sel-chosed-txt" data-value="">-请选择-</span>
                                <span class="jselect-icon"></span>
                            </div>
                            <div class="cus-sel-list" style="display: none;">
                                <ul>
                                    <li class="empty-sel"><a href="javascript:;" data-value="">-请选择-</a></li>
                                    <volist name="typeDic" id="name">
                                        <li>
                                            <a href="javascript:;" data-value="{$key}">{$name}</a>
                                        </li>
                                    </volist>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="control-group mb10">
                    <label class="control-label"><sub class="control-sub"></sub> 任务单价：</label>
                    <div class="control-form">
                        <input type="number" name="income" placeholder="单位元" class="input-text">
                    </div>
                </div>
                <div class="control-group mb10">
                    <label class="control-label"><sub class="control-sub"></sub> 任务数量：</label>
                    <div class="control-form">
                        <input type="number" name="num" placeholder="任务数量" class="input-text">
                    </div>
                </div>

                <div class="control-group mb10">
                    <label class="control-label"><sub class="control-sub"></sub> 排序：</label>
                    <div class="control-form">
                        <input type="number" name="task_order" value="0" class="input-text">
                    </div>
                </div>

                <div class="control-group mb10">
                    <label class="control-label"><sub class="control-sub"></sub> 开始时间：</label>
                    <div class="control-form">
                        <div class="date-wrap  w170">
                            <input type="text" name="begin_time" value="" class="date-txt datetimepicker" />
                        </div>
                    </div>
                </div>
                <div class="control-group mb10">
                    <label class="control-label"><sub class="control-sub"></sub> 结束时间：</label>
                    <div class="control-form">
                        <div class="date-wrap  w170">
                            <input name="end_time" type="text" name="end_time" value=""
                                class="date-txt datetimepicker" />
                        </div>
                    </div>
                </div>
                <div class="control-group mb10">
                    <label class="control-label"><sub class="control-sub"></sub> 任务须知：</label>
                    <div class="control-form">
                        <div id="editorNotice"></div>
                    </div>
                </div>
                <div class="control-group mb10">
                    <label class="control-label"><sub class="control-sub"></sub> 任务须知点击复制：</label>
                    <div class="control-form">
                        <input type="text" name="notice_url" placeholder="任务须知长按复制的地址,没有不用填写"
                            class="input-text  input-text-w500">
                    </div>
                </div>
                <div class="control-group mb10">
                    <label class="control-label"><sub class="control-sub"></sub> 任务内容：</label>
                    <div class="control-form">
                        <div id="editor"></div>
                    </div>
                </div>
            </form>
            <div class="control-group mb10">
                <label class="control-label"></label>
                <div class="control-form">
                    <a class="add-btn c-btn c-btn-blue">提交</a>
                </div>
            </div>
        </div>

    </div>
</block>
<block name="js">
    <script type="text/javascript" src="__CST__/js/api.myTask.js?v={:C('JS_CSS_VERSION')}"></script>
    <script type="text/javascript" src="__CST__/js/imgUpload.js?v={:C('JS_CSS_VERSION')}"></script>
    <script type="text/javascript" src="__PC__/widget/wangEditor/wangEditor.js?v={:C('JS_CSS_VERSION')}">
    </script>

    <!--日期控件-->
    <link rel="stylesheet"
        href="__PC__/widget/datetimepicker/2.1.9/css/jquery.datetimepicker.min.css?v={:C('JS_CSS_VERSION')}"
        type="text/css" />
    <script type="text/javascript"
        src="__PC__/widget/datetimepicker/2.1.9/js/jquery.datetimepicker.min.js?v={:C('JS_CSS_VERSION')}"></script>

    <script type="text/javascript">
        var editor;
        var editorNotic;
        $(function () {
            $('.datetimepicker').datetimepicker({});
            editorNotic = initEdit('#editorNotice');
            editor = initEdit('#editor');

        });
        //点击上传图片
        $(document).on('click', '.upload-file-btn', function () {
            var $t = $(this);
            $.imgUpload(function (res) {
                if (res.Code != 10000) {
                    $.toast(res.Message);
                    return false;
                }

                var url = res.Result;
                $t.parent().html("<img src='" + url +
                    "' class='upload-file-btn' height='100' width='100'>");
            });
        });

        $('.add-btn').on('click', function () {
            var data = getSeachData();
            data.cover = $('div[data-name=cover] img').attr('src');
            data.notice = editorNotic.txt.html();
            data.info = editor.txt.html();
            doAddTask(data, function (res) {
                if (res.Code != 10000) {
                    $.toast(res.Message);
                    return false;
                }

                var url = $.sUrl("/Console/MyTask/taskList");
                location.href = url;
            });
        });

        /**
         * 初始化富文本编辑器
         * @param id
         * @returns {*}
         */
        function initEdit(id) {
            var editor = new wangEditor(id)
            editor.customConfig.menus = [
                'bold',
                'fontSize',
                'underline',
                'strikeThrough',
                'foreColor',
                'link',
                'justify',
                'list',
                'image',
                'table'
            ];

            editor.customConfig.zIndex = 0;
            editor.customConfig.uploadImgMaxLength = 1;
            editor.customConfig.customUploadImg = function (files, insert) {
                var file = files[0];
                //压缩图片
                $.compressImg(file, function (file) {
                    //提交压缩过的图片
                    $.ajaxImg(file, function (res) {
                        if (res.Code != 10000) {
                            $.toast(res.Message);
                            return false;
                        }

                        var url = res.Result;
                        insert(url);
                    });
                });
            }

            // 过滤word
            editor.customConfig.pasteTextHandle = function (content) {
                if (content == '' && !content) {
                    return "";
                }
                var html = content
                html = html.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
                html = html.replace(/<style>[\s\S]*?<\/style>/ig, '')
                html = html.replace(/<\/?[^>]*>/g, '')
                html = html.replace(/[ | ]*\n/g, '\n')
                html = html.replace(/&nbsp;/ig, '')
                return html
            }
            editor.create();
            return editor;
        }

        /**
         * 获取搜索的数据
         * @returns {{}}
         */
        function getSeachData() {
            var fromData = $('#myForm').serializeArray();
            var data = {};
            $.each(fromData, function () {
                var name = this.name;
                var value = $.trim(this.value);
                if (value) {
                    data[name] = value;
                }
            });
            return data;
        }
    </script>
</block>